<template>
  <div class="global-mobile">
    <div class="global-mobile__header">
      <svg-icon icon-class="login-phone"></svg-icon>
      <span class="global-mobile__phone-area-no">+{{selectTelArea}}</span>
      <i class="el-icon-arrow-down" v-if="!showSelect" @click="showSelect = !showSelect"></i>
      <i class="el-icon-arrow-up" v-if="showSelect" @click="showSelect = !showSelect"></i>
    </div>
    <div class="global-mobile__select" v-if="showSelect">
      <!--<div class="global-mobile__select-search">-->
        <!--<i class="el-icon-search global-mobile__select-search-icon"></i>-->
        <!--<input type="text" placeholder="搜索" v-model="keywords" @keyup="filterList">-->
      <!--</div>-->
      <ul class="global-mobile__select-ul">
        <li v-for="(item,index) in localGlobalMobileList" :key="index" class="global-mobile__select-li" @click="changeHandle(item)">
          <span>
            {{item.name}}({{item.en}})+{{item.tel}}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import localGlobalMobileList from './global-mobile-list';
export default {
  name:"global-mobile",
  data(){
    return{
      showSelect:false,
      localGlobalMobileList:localGlobalMobileList,
      selectTelArea:'86',
      keywords:'',
    }
  },
  methods:{
    changeHandle(item){
      this.selectTelArea=item.tel;
      this.showSelect=false;
      this.$store.commit(types.SET_SELECTTELAREA, item.tel);
      this.$emit("changeTelArea",item.tel);
    },
    filterList(){
      if(this.keywords === ''){
        this.localGlobalMobileList=localGlobalMobileList;
      }else{
        let filterList =  _.filter(this.localGlobalMobileList,item=>{
          return item.name.indexOf(this.keywords) > -1 || item.en.indexOf(this.keywords) > -1 || item.tel.indexOf(this.keywords) > -1
        })
        this.localGlobalMobileList=filterList;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
@include b(global-mobile){
  position: relative;
  color: $--color-black;
  @include e(select){
    position: absolute;
    bottom:-200px;
    left:-22px;
    padding: 10px;
    background: $--color-white;
    height: 160px;
    width: 392px;
    z-index:10;
    border: 1px solid #eaeaea ;
    border-top: none;
    border-radius: 4px;
    @include e(select-search){
      background: #fafafa;
      border-radius: 4px;
      padding: 10px;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      @include e(select-search-icon){
        font-size: 14px;
      }
      input{
        width: 340px;
        height: 25px;
        line-height: 25px;
        border: none;
        background: #fafafa;
        padding-left:10px;
        outline:none;
      }
    }
    @include e(select-ul){
      margin: 0;
      @include e(select-li){
        opacity: 0.8;
        font-size: 14px;
        color: #4C4C4C;
        letter-spacing: 0;
        border-bottom: 1px solid #f7f7f7;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        &:hover{
          background: #f7f7f7;
        }
      }
    }
    ul{
      padding: 0;
      height: 180px;   
      list-style: none;
      overflow-y: scroll;
      overflow-x: hidden;
      &::-webkit-scrollbar {
				width: 5px;
				height: 5px;
				background-color: #fff;
			}
			/*定义滚动条轨道 内阴影+圆角*/
			
			&::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
			
				background-color: #fff;
			}
			/*定义滑块 内阴影+圆角*/
			
			&::-webkit-scrollbar-thumb {
				
				-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
				background-color: #fff;
			}
    }
  }
}
</style>


